import React from 'react';
import { Table, Input, Button } from 'antd';

export default class TableComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: []
        }
    }

    [
        {
            title: '名称',
            dataIndex: 'Name',
            key: 'Name',
            align: 'center',
            render(text, record) {
                return getFieldDecorator(`Name_${record.key}`)(
                    <Input placeholder="请输入" />
                )
            }
        },
        {
            title: '运费',
            dataIndex: 'Freight',
            key: 'Freight',
            align: 'center',
            width: 150,
            render(text, record) {
                return getFieldDecorator(`Freight_${record.key}`)(
                    <Input placeholder="请输入" />
                )
            }
        },
        {
            title: '附加费',
            dataIndex: 'ExtraCharge',
            key: 'ExtraCharge',
            align: 'center',
            width: 150,
            render(text, record) {
                return getFieldDecorator(`ExtraCharge_${record.key}`)(
                    <Input placeholder="请输入" />
                )
            }
        },
        {
            title: '',
            dataIndex: '',
            width: 50,
            align: 'center',
            render: (text, record) => {
                return (
                    this.state.inland.length > 1 ?
                        (
                            <Popconfirm title="确定删除?" onConfirm={() => this.onInlandDelete(record.key)}>
                                <Icon type="minus-circle" />
                            </Popconfirm>
                        ) : null
                );
            },
        }
    ]

    // 删除表格
    onDelete = (key) => {
        const dataSource = this.state.dataSource;
        this.setState({
            dataSource: dataSource.filter(item => item.key !== key)
        })
    }
    // 添加表格
    handleAdd = () => {
        const { dataSource } = this.state.dataSource;
        const newData = {
            key: [...dataSource].length + 1,
            Name: null,
            Freight: null,
            ExtraCharge: null,
            Surcharge: null
        };
        this.setState({
            dataSource: [...dataSource, newData]
        })
    }

    render() {
        let dataSource = this.props.addBtn ? this.state.dataSource : this.props.dataSource;
        return (
            <div>
                {
                    this.props.addBtn && <Button className="editable-add-btn" onClick={this.inlandHandleAdd}>添加</Button>
                }
                <Table
                    bordered={true}
                    columns={this.props.columns}
                    pagination={false}
                    dataSource={dataSource}></Table>
            </div>
            
        )
    }
}